<%-- 
    Document   : employee
    Created on : May 21, 2018, 9:20:04 PM
    Author     : Andy
--%>

<%@page import="com.antexpress.common.Const"%>
<%@page import="com.antexpress.pojo.Employee"%>
<%@page import="com.antexpress.bean.Authentication"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Employee -- Ant Express</title>
        <link rel="shortcut icon" href="static/img/ant-logo.png">
        <link href="static/css/style.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/normalize.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/default.css" rel="stylesheet" type="text/css"/>
        <link href="static/dist/css/jquery.secretnav.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/demo.css" rel="stylesheet" type="text/css"/>
        <link href="static/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/edbox.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/selectpage.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/stickysort.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <%
            if(!Authentication.isLogin(session)) {
                response.sendRedirect("index.jsp");
                return;
            }
            Employee emp = (Employee)session.getAttribute(Const.CURRENT_USER);
            if(!Authentication.isEmployeeAdmin(emp)){
                response.sendRedirect("404.jsp");
                return;
            }
        %>
        <div class="sn-outer-wrapper sn-moveleft modalview">
            <div class="sn-content-wrapper transform" style="cursor: default;">
                <div id="content" style="top: 0px;">
                    <jsp:include page="ui/header.jsp"/>
                    <div class="container-nav">
                        <div class="container">
                            <button class="open btn btn-default bt-open" title="Menu"><i class="fa fa-bars" aria-hidden="true"></i></button>
                            <%
                                if(Authentication.isEmployeeAdmin(emp))
                                    out.println("<a href='employee.jsp' class='content-nav-bt'>Employee Management</a>");
                                if(Authentication.isHRAdmin(emp))
                                    out.println("<a href='department.jsp' class='content-nav-bt'>Department Management</a>");
                            %>
                        </div>
                    </div>
                    <div class="container" style="text-align: left;color: #000">
                        <h1 class="heading"><i class="fa fa-users" aria-hidden="true"></i> Employee Management</h1>
                        <div class="content-div">
                            <div class="emp-top-box">
                                <div style="display: inline-block">
                                    <button class="btn btn-primary" edbox data-box-target="#emp-add-box" title="Add new employee"><i class="fa fa-user-plus" aria-hidden="true"></i></button>&nbsp;&nbsp;
                                    <button class="btn btn-primary" id="select-all-bt" select="1" onclick="selectAllEmp()" title="Select all"><i class="fa fa-check" aria-hidden="true"></i></button>&nbsp;&nbsp;
                                    <button class="btn btn-danger" title="Delete employees" edbox data-box-target="#emp-batch-delete-box"><i class="fa fa-trash" aria-hidden="true"></i></button>
                                </div>
                                <div style="display: inline-block;float:right;text-align: right">
                                    <form onsubmit="return false;">
                                        <input type="text" placeholder="Emp Name" id="sh-name" class="searchInput" maxlength="50"/>
                                        <input type="text" placeholder="Mobile" id="sh-mobile" class="searchInput" maxlength="11"/>
                                        <input type="text" placeholder="Dept" id="sh-dept" class="searchInput"/>
                                        <input type="text" placeholder="Title" id="sh-title" class="searchInput"/>
                                        <button type="submit" class="btn btn-primary" onclick="searchEmp()" title="Search"><i class="fa fa-search" aria-hidden="true"></i></button>
                                        <button class="btn btn-default" title="Refresh" onclick="getEmpList()"><i class="fa fa-refresh" aria-hidden="true"></i></button>
                                    </form>
                                    <input type="hidden" id="search-emp-name"/>
                                    <input type="hidden" id="search-emp-mobile"/>
                                    <input type="hidden" id="search-emp-dept"/>
                                    <input type="hidden" id="search-emp-title"/>
                                    <input type="hidden" id="search-emp-page" value="1"/>
                                </div>
                            </div>
                            <table id="emp-table" class="pub-table pub-table-hover">
                                <thead>
                                    <tr>
                                        <th>&nbsp;<i class="fa fa-check-square-o" aria-hidden="true"></i>&nbsp;</th>
                                        <th>Username</th><th>Name</th><th>Gender</th><th>Dept</th><th>Title</th><th>Status</th>
                                        <th>&nbsp;<i class="fa fa-pencil-square-o" aria-hidden="true"></i>&nbsp;</th>
                                    </tr>
                                </thead>
                                <tbody id="emp-table-body">
                                    
                                </tbody>
                            </table>
                            <div id="searchResultMsg" class="content-center table-result-msg">
                                
                            </div>
                            <div class="content-center">
                                <ul class="pagination" id="empPag"></ul>
                            </div>
                        </div>
                        <!-- 添加员工的模态框 -->
                        <div id="emp-add-box" class="ed-div" style="display:none;">
                            <h3 class="subheading" style="margin: 3px;"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Add New Employee</h3><br/>
                            <form onsubmit="return false;" id="addEmpForm">
                            <h4 class="subTitle" style="float: left;margin: 10px;"><i class="fa fa-user" aria-hidden="true"></i> Account Information</h4>
                            <table class="model-form-table" style="color: black;">
                                <tr>
                                    <td>*Username</td>
                                    <td><input type="text" name="username" id="add-emp-username" class="input-md-width" minlength="6" maxlength="18">
                                    </td>
                                </tr>
                                <tr>
                                    <td>*Password</td>
                                    <td><input type="password" name="password" id="add-emp-password" class="input-md-width" style="width: 240px;" minlength="6" maxlength="12">
                                        &nbsp;&nbsp;<i class="fa fa-eye" id="add-emp-show-pass" title="Show password" aria-hidden="true" style="cursor: pointer;"></i>&nbsp;&nbsp;</td>
                                </tr>
                            </table><br/>
                            <h4 class="subTitle" style="float: left;margin: 10px;"><i class="fa fa-paw" aria-hidden="true"></i> Employee Profile</h4>
                            <table class="model-form-table" style="color: black;">
                                <tr>
                                    <td>*Name</td>
                                    <td><input type="text" name="name" id="add-emp-name" class="input-md-width" minlength="1" maxlength="50">
                                    </td>
                                </tr>
                                <tr>
                                    <td>*Gender</td>
                                    <td><div style="width:280px;margin:auto;text-align:left"><input type="radio" name="add-gender" id="add-emp-m" value="m" checked><label for="add-emp-m">Male</label>&nbsp;&nbsp;
                                        <input type="radio" id="add-emp-f" name="add-gender" value="f"><label for="add-emp-f">Female</label></div></td>
                                </tr>
                                <tr>
                                    <td>*Dept&Title</td>
                                    <td><input type="text" id="add-emp-dept" style="width:140px;">
                                        <input type="text" name="title" id="add-emp-title" style="width: 140px;">
                                    </td>
                                </tr>
                                <tr>
                                    <td>Mobile</td>
                                    <td><input type="text" name="mobile" id="add-emp-mobile" class="input-md-width" maxlength="11">
                                    </td>
                                </tr>
                                <tr>
                                    <td>Email</td>
                                    <td><input type="text" name="email" id="add-emp-email" class="input-md-width" maxlength="50">
                                    </td>
                                </tr>
                                <tr>
                                    <td>*Birth</td>
                                    <td><input type="date" name="add-birth" id="add-emp-birth" class="input-md-width">
                                    </td>
                                </tr>
                                <tr>
                                    <td>*Salary</td>
                                    <td><input type="number" name="salary" id="add-emp-salary" class="input-md-width" min="0" maxlength="12">
                                    </td>
                                </tr>
                                <tr><td></td><td id="add-emp-error-msg" style="color: #d9534f;text-align: left;"></td></tr>
                            </table>
                            <div class="content-center" style="margin: 10px;">
                                <input type="submit" onclick="addNewEmp()" class="btn btn-primary" value=" Add "/>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="button" id="bt-add-emp-cancel" onclick="$.edbox('close');" class="btn btn-default" value="Cancel"/>
                            </div>
                            </form>
                        </div><!-- 添加员工的模态框 结束 -->
                        <!-- 展示员工信息模态框 -->
                        <div id="emp-show-box" class="ed-div" style="display:none;">
                            <h3 class="subheading" style="margin: 3px;"><i class="fa fa-info-circle" aria-hidden="true"></i> Employee Details</h3><br/>
                            <table class="model-form-table" style="color: black;">
                                <tr>
                                    <td>Username</td>
                                    <td id="emp-show-username"></td>
                                </tr>
                                <tr>
                                    <td>Name</td>
                                    <td id="emp-show-name"></td>
                                </tr>
                                <tr>
                                    <td>Gender</td>
                                    <td id="emp-show-gender"></td>
                                </tr>
                                <tr>
                                    <td>Department</td>
                                    <td id="emp-show-dept"></td>
                                </tr>
                                <tr>
                                    <td>Title</td>
                                    <td id="emp-show-title"></td>
                                </tr>
                                <tr>
                                    <td>Mobile</td>
                                    <td id="emp-show-mobile"></td>
                                </tr>
                                <tr>
                                    <td>Email</td>
                                    <td id="emp-show-email"></td>
                                </tr>
                                <tr>
                                    <td>Birth</td>
                                    <td id="emp-show-birth"></td>
                                </tr>
                                <tr>
                                    <td>Salary</td>
                                    <td id="emp-show-salary"></td>
                                </tr>
                                <tr>
                                    <td>Status</td>
                                    <td id="emp-show-status"></td>
                                </tr>
                            </table>
                            <input type="button" id="bt-add-emp-cancel" onclick="$.edbox('close');" class="btn btn-default" value="Close"/>
                        </div><!-- 展示员工信息模态框 结束 -->
                        <!-- 修改员工的模态框 -->
                        <div id="emp-edit-box" class="ed-div" style="display:none;">
                            <h3 class="subheading" style="margin: 3px;"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Employee</h3><br/>
                            <form onsubmit="return false;" id="editEmpForm">
                            <h4 class="subTitle" style="float: left;margin: 10px;"><i class="fa fa-user" aria-hidden="true"></i> Account Information</h4>
                            <table class="model-form-table" style="color: black;">
                                <tr>
                                    <td>Username<input type="hidden" id="edit-emp-id"/></td>
                                    <td id="edit-emp-username" style="text-align: left;padding-left: 20px;"></td>
                                </tr>
                                <tr>
                                    <td>Password</td>
                                    <td><input type="password" name="password" id="edit-emp-password" class="input-md-width" style="width: 240px;" minlength="6" maxlength="12">
                                        &nbsp;&nbsp;<i class="fa fa-eye" id="edit-emp-show-pass" title="Show password" aria-hidden="true" style="cursor: pointer;"></i>&nbsp;&nbsp;</td>
                                </tr>
                            </table><br/>
                            <h4 class="subTitle" style="float: left;margin: 10px;"><i class="fa fa-paw" aria-hidden="true"></i> Employee Profile</h4>
                            <table class="model-form-table" style="color: black;">
                                <tr>
                                    <td>*Name</td>
                                    <td><input type="text" name="name" id="edit-emp-name" class="input-md-width" minlength="1" maxlength="50">
                                    </td>
                                </tr>
                                <tr>
                                    <td>*Gender</td>
                                    <td><div style="width:280px;margin:auto;text-align:left"><input type="radio" name="edit-gender" value="m" id="edit-emp-m" checked><label for="edit-emp-m">Male</label>&nbsp;&nbsp;
                                        <input type="radio" id="edit-emp-f" name="edit-gender" value="f"><label for="edit-emp-f">Female</label></div></td>
                                </tr>
                                <tr>
                                    <td>*Dept&Title</td>
                                    <td><input type="text" id="edit-emp-dept" style="width:140px;">
                                        <input type="text" name="title" id="edit-emp-title" style="width: 140px;">
                                    </td>
                                </tr>
                                <tr>
                                    <td>Mobile</td>
                                    <td><input type="text" name="mobile" id="edit-emp-mobile" class="input-md-width" maxlength="11">
                                    </td>
                                </tr>
                                <tr>
                                    <td>Email</td>
                                    <td><input type="text" name="email" id="edit-emp-email" class="input-md-width" maxlength="50">
                                    </td>
                                </tr>
                                <tr>
                                    <td>*Birth</td>
                                    <td><input type="date" name="edit-birth" id="edit-emp-birth" class="input-md-width">
                                    </td>
                                </tr>
                                <tr>
                                    <td>*Salary</td>
                                    <td><input type="number" name="salary" id="edit-emp-salary" class="input-md-width" min="0" maxlength="12">
                                    </td>
                                </tr>
                                <tr>
                                    <td>*Status</td>
                                    <td><input type="text" name="salary" id="edit-emp-status" class="input-md-width" min="0" maxlength="12">
                                    </td>
                                </tr>
                                <tr><td></td><td id="edit-emp-error-msg" style="color: #d9534f;text-align: left;"></td></tr>
                            </table>
                            <div class="content-center" style="margin: 10px;">
                                <input type="submit" onclick="updateEmp()" class="btn btn-primary" value=" Save "/>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="button" id="bt-edit-emp-cancel" onclick="$.edbox('close');" class="btn btn-default" value="Cancel"/>
                            </div>
                            </form>
                        </div><!-- 修改员工的模态框 结束 -->
                        <div id="emp-delete-box" class="ed-div" style="display:none;">
                            <h3 class="subheading" style="margin-top: 20px;">Do you really delete <span id="emp-delete-username"></span>?</h3><br/>
                            <div class="content-center" style="margin: 10px;">
                                <form onsubmit="return false;">
                                    <input type="hidden" id="emp-delete-id"/>
                                    <input type="submit" onclick="deleteEmp()" class="btn btn-danger" value=" Delete "/>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input type="button" id="bt-delete-emp-cancel" onclick="$.edbox('close');" class="btn btn-default" value="Cancel"/>
                                </form>
                            </div>
                        </div>
                        <div id="emp-batch-delete-box" class="ed-div" style="display:none;">
                            <h3 class="subheading" style="margin-top: 20px;">Do you really  batch delete employees?</h3><br/>
                            <div class="content-center" style="margin: 10px;">
                                <form onsubmit="return false;">
                                    <input type="submit" onclick="batchDelete()" class="btn btn-danger" value=" Delete "/>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input type="button" id="bt-batch-delete-emp-cancel" onclick="$.edbox('close');" class="btn btn-default" value="Cancel"/>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sn-nav-wrapper">
                <nav id="nav" class="sn-nav left vertical">
                    <jsp:include page="ui/nav.jsp"/>
                </nav>
            </div>
        </div>
        <script src="static/js/modernizr.custom.25376.js" type="text/javascript"></script>
        <script src="static/js/jquery.js" type="text/javascript"></script>
        <script src="static/js/common-script.js" type="text/javascript"></script>
        <script src="static/dist/js/jquery.secretnav.js" type="text/javascript"></script>
        <script src="static/js/jquery.ba-throttle-debounce.min.js" type="text/javascript"></script>
        <script src="static/js/jquery.edbox.js" type="text/javascript"></script>
        <script src="static/js/selectpage.js" type="text/javascript"></script>
        <script src="static/js/jquery.stickysort.js" type="text/javascript"></script>
        <script src="static/js/jqPaginator.js" type="text/javascript"></script>
        <script type="text/javascript">
            var empStatus = [
                {id:-2 ,name:'Dismissal'},
                {id:-1 ,name:'Abdicate'},
                {id:1 ,name:'Leaving'},
                {id:0 ,name:'In-Service'}
            ];
            $(function() {
                menu();
                $('#emp-table').stickySort();
                initDeptAndTitle();
                buildEmpPag(1,1);
                $('#edit-emp-status').selectPage({
                    showField : 'name',
                    keyField : 'id',
                    data : empStatus
                });
            });
            /*获取员工列表，pageNo-页数*/
            function getEmpList(){
                $("#searchResultMsg").empty();
                $.ajax({
                    url: "${pageContext.request.contextPath}/emps/list_emp.do",
                    data: {
                        "name": $("#search-emp-name").val(),
                        "mobile": $("#search-emp-mobile").val(),
                        "dept": $("#search-emp-dept").val(),
                        "title": $("#search-emp-title").val(),
                        "pageNo": $("#search-emp-page").val()
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            var empList = result.data.list;
                            if(empList.length===0){
                                $("#searchResultMsg").append("<i class='fa fa-exclamation-circle' aria-hidden='true'></i> Sorry, no records!");
                            }
                            buildEmpTable(empList);
                            var totalPages = 1;
                            if(result.data.totalPages!==0)
                                totalPages = result.data.totalPages;
                            $('#empPag').jqPaginator('option', {
                                totalPages: totalPages,
                                currentPage: result.data.pageNo
                            });
                        }else {
                            $.edbox({ danger: result.msg });
                        }
                    },
                    error: function() {
                        $.edbox({ danger: "Opps, records got failed!" });
                    }
                });
            }
//            <th>Username</th><th>Name</th><th>Gender</th><th>Dept</th><th>Title</th><th>Status</th>
            /*初始化创建员工表格*/
            function buildEmpTable(empList) {
                $("#emp-table-body").empty();
                var rowNum = 0;
                $.each(empList, function(){
                    rowNum++;
                    var empCheckbox = $("<td>").append("<input type='checkbox' value='"+this.id+"' name='delEmp'/>");
                    var empUsername = $("<td>").append(this.username);
                    var empName = $("<td>").append(this.name);
                    var gender = "Male";
                    if(this.gender==="m")
                        gender = "Male";
                    else
                        gender = "Female";
                    var empGender = $("<td>").append(gender);
                    var empDept = $("<td>").append(this.title.department.name);
                    var empTitle = $("<td>").append(this.title.name);
                    var status = "In-service";
                    if(this.status===-10)
                        status = "Deleted";
                    else if(this.status === -2)
                        status = "Dismissal";
                    else if(this.status === -1)
                        status = "Abdicate";
                    else if(this.status ===1)
                        status = "Leaving";
                    else
                        status = "In-Service";
                    var empEmail="";
                    if(this.email!==null)
                        empEmail = this.email;
                    var empStatus = $("<td>").append(status);
                    var showEmpOp = $("<a href='#' title='Details' edbox data-box-target='#emp-show-box' username='"+this.username+"' name='"+this.name+"' gender='"+gender
                            +"' dept='"+this.title.department.name+"' titles='"+this.title.name+"' mobile='"+this.mobile+"' email='"+empEmail+"' birth='"+this.birth
                            +"' salary='"+this.salary+"' status='"+status+"'></a>")
                            .append("<i class='fa fa-info' aria-hidden='true'></i>");
                    showEmpOp.click(function(){
                        $("#emp-show-username").empty();$("#emp-show-username").append(showEmpOp.attr("username"));
                        $("#emp-show-name").empty();$("#emp-show-name").append(showEmpOp.attr("name"));
                        $("#emp-show-gender").empty();$("#emp-show-gender").append(showEmpOp.attr("gender"));
                        $("#emp-show-dept").empty();$("#emp-show-dept").append(showEmpOp.attr("dept"));
                        $("#emp-show-title").empty();$("#emp-show-title").append(showEmpOp.attr("titles"));
                        $("#emp-show-mobile").empty();$("#emp-show-mobile").append(showEmpOp.attr("mobile"));
                        $("#emp-show-email").empty();$("#emp-show-email").append(showEmpOp.attr("email"));
                        $("#emp-show-birth").empty();$("#emp-show-birth").append(timestampToDate(showEmpOp.attr("birth")));
                        $("#emp-show-salary").empty();$("#emp-show-salary").append("<i class='fa fa-rmb' aria-hidden='true'></i> ").append(showEmpOp.attr("salary")).append(" /month");
                        $("#emp-show-status").empty();$("#emp-show-status").append(showEmpOp.attr("status"));
                    });
                    showEmpOp.edbox();
                    var editEmpOp = $("<a href='#' edbox data-box-target='#emp-edit-box' title='Edit' empId='"+this.id+"' username='"+this.username+"' name='"+this.name+"' gender='"+this.gender
                            +"' dept='"+this.title.department.id+"' titles='"+this.title.id+"' mobile='"+this.mobile+"' email='"+empEmail+"' birth='"+this.birth
                            +"' salary='"+this.salary+"' status='"+this.status+"'></a>")
                            .append("<i class='fa fa-pencil' aria-hidden='true'></i");
                    editEmpOp.click(function(){
                        $("#edit-emp-id").val(editEmpOp.attr("empId"));
                        $("#edit-emp-username").empty();$("#edit-emp-username").append(editEmpOp.attr("username"));
                        $("#edit-emp-password").val("");
                        $("#edit-emp-name").val(editEmpOp.attr("name"));
                        if(editEmpOp.attr("gender")==="m"){
                            $("#edit-emp-m").click();
                        }else{
                            $("#edit-emp-f").click();
                        }
                        $('#edit-emp-dept').val(editEmpOp.attr("dept"));
                        $('#edit-emp-dept').selectPageRefresh();
                        $.ajax({
                            url: "${pageContext.request.contextPath}/dept/list_titles.do",
                            data: {"deptId":editEmpOp.attr("dept")},
                            type: "POST",
                            dataType: "json",
                            success: function(result) {
                                if(result.status === 1) {
                                    $('#edit-emp-title').selectPageData(result.data);
                                    $('#edit-emp-title').val(editEmpOp.attr("titles"));
                                    $('#edit-emp-title').selectPageRefresh();
                                }
                            }
                        });
                        $("#edit-emp-birth").val(timestampToDate(editEmpOp.attr("birth")));
                        $("#edit-emp-mobile").val(editEmpOp.attr("mobile"));
                        $("#edit-emp-email").val(editEmpOp.attr("email"));
                        $("#edit-emp-salary").val(editEmpOp.attr("salary"));
                        $('#edit-emp-status').val(editEmpOp.attr("status"));
                        $('#edit-emp-status').selectPageRefresh();
                    });
                    editEmpOp.edbox();
                    var empDel = $("<a href='#'edbox data-box-target='#emp-delete-box' empId='"+this.id+"' username='"+this.username+"' title='Delete' class='red-a'></a>").append("<i class='fa fa-trash' aria-hidden='true'></i>");
                    empDel.click(function(){
                        $("#emp-delete-username").empty();$("#emp-delete-username").append(empDel.attr("username"));
                        $("#emp-delete-id").val(empDel.attr("empId"));
                    });
                    empDel.edbox();
                    var empOp = $("<td>").append(showEmpOp).append("&nbsp;&nbsp;&nbsp;").append(editEmpOp).append("&nbsp;&nbsp;&nbsp;").append(empDel);
                    var empRow = $("<tr>").append(empCheckbox).append(empUsername).append(empName)
                            .append(empGender).append(empDept).append(empTitle).append(empStatus).append(empOp);
                    if(rowNum%2===0)
                        empRow.addClass("td-bk");
                    $("#emp-table-body").append(empRow);
                });
            }
            
            function buildEmpPag(totalPages, currentPage) {
                $('#empPag').jqPaginator({
                    totalPages: totalPages,
                    visiblePages: 5,
                    currentPage: currentPage,

                    first: '<li class="first"><a href="javascript:void(0);">First</a></li>',
                    prev: '<li class="prev"><a href="javascript:void(0);">Previous</a></li>',
                    next: '<li class="next"><a href="javascript:void(0);">Next</a></li>',
                    last: '<li class="last"><a href="javascript:void(0);">Last</a></li>',
                    page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
                    onPageChange: function (num) {
                        $("#search-emp-page").val(num);
                        getEmpList();
                    }
                });
            }
            /*获取*/
            function initDeptAndTitle() {
                var deptData = {};
                var titleData = {};
                $.ajax({
                    url: "${pageContext.request.contextPath}/dept/list_dept_title.do",
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            deptData = result.data.dept;
                            titleData = result.data.title;
                            initDeptSelect(deptData,titleData);
                        }
                    }
                });
                
                $("#add-emp-title").selectPage({
                    showField: 'name',
                    keyField: 'id',
                    data: []
                });
                $("#sh-title").selectPage({
                    showField: 'name',
                    keyField: 'id',
                    data: []
                });
                $("#edit-emp-title").selectPage({
                    showField: 'name',
                    keyField: 'id',
                    data: []
                });
            }
            
            function initDeptSelect(deptData, titleData) {
                $("#add-emp-dept").selectPage({
                    showField: 'name',
                    keyField: 'id',
                    data: deptData,
                    eSelect: function (data) {
                        if(data){
                            var arr = new Array();
                            $.each(titleData, function(i,row){
                                if(row.department.id === data.id) arr.push(row);
                            });
                            if(arr.length) $('#add-emp-title').selectPageData(arr);
                        }
                    },
                    eClear: function(){
                        $('#add-emp-title').selectPageClear();
                        $('#add-emp-title').selectPageData([]);
                    }
                });
                $("#sh-dept").selectPage({
                    showField: 'name',
                    keyField: 'id',
                    data: deptData,
                    eSelect: function (data) {
                        if(data){
                            var arr = new Array();
                            $.each(titleData, function(i,row){
                                if(row.department.id === data.id) arr.push(row);
                            });
                            if(arr.length) $('#sh-title').selectPageData(arr);
                        }
                    },
                    eClear: function(){
                        $('#sh-title').selectPageClear();
                        $('#sh-title').selectPageData([]);
                    }
                });
                $("#edit-emp-dept").selectPage({
                    showField: 'name',
                    keyField: 'id',
                    data: deptData,
                    eSelect: function (data) {
                        if(data){
                            var arr = new Array();
                            $.each(titleData, function(i,row){
                                if(row.department.id === data.id) arr.push(row);
                            });
                            if(arr.length) $('#edit-emp-title').selectPageData(arr);
                        }
                    },
                    eClear: function(){
                        $('#edit-emp-title').selectPageClear();
                        $('#edit-emp-title').selectPageData([]);
                    }
                });
            }
            /*展示密码*/
            $("#add-emp-show-pass").click(function(){
                if($("#add-emp-password").attr("type")==="text"){
                    $("#add-emp-password").attr("type","password");
                    $("#add-emp-show-pass").attr("title","Show password");
                    $("#add-emp-show-pass").css("color", "#000");
                }else{
                    $("#add-emp-password").attr("type","text");
                    $("#add-emp-show-pass").attr("title","Hide password");
                    $("#add-emp-show-pass").css("color", "#BADA55");
                }
            });
            $("#edit-emp-show-pass").click(function(){
                if($("#edit-emp-password").attr("type")==="text"){
                    $("#edit-emp-password").attr("type","password");
                    $("#edit-emp-show-pass").attr("title","Show password");
                    $("#edit-emp-show-pass").css("color", "#000");
                }else{
                    $("#edit-emp-password").attr("type","text");
                    $("#edit-emp-show-pass").attr("title","Hide password");
                    $("#edit-emp-show-pass").css("color", "#BADA55");
                }
            });
            
            
            function addNewEmp() {
                $.ajax({
                    url: "${pageContext.request.contextPath}/emps/add_emp.do",
                    data: {
                        "username": $("#add-emp-username").val(),
                        "password": $("#add-emp-password").val(),
                        "name": $("#add-emp-name").val(),
                        "gender": $("input[name='add-gender']:checked").val(),
                        "titleId": $("#add-emp-title").val(),
                        "mobile": $("#add-emp-mobile").val(),
                        "email": $("#add-emp-email").val(),
                        "birth": new Date($("input[name='add-birth']").val()),
                        "salary": $("#add-emp-salary").val()
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            getEmpList();
                            clearAddEmpForm();
                            $("#bt-add-emp-cancel").click();
                        }else{
                            $("#add-emp-error-msg").empty();
                            $("#add-emp-error-msg").append(result.msg);
                        }
                    },
                    error: function(){
                        $("#add-emp-error-msg").empty();
                        $("#add-emp-error-msg").append("Oppp, something goes wrong(Please select a valid birth)!");
                    }
                });
            };
            
            function updateEmp() {
                $.ajax({
                    url: "${pageContext.request.contextPath}/emps/edit_emp.do",
                    data: {
                        "id": $("#edit-emp-id").val(),
                        "password": $("#edit-emp-password").val(),
                        "name": $("#edit-emp-name").val(),
                        "gender": $("input[name='edit-gender']:checked").val(),
                        "titleId": $("#edit-emp-title").val(),
                        "mobile": $("#edit-emp-mobile").val(),
                        "email": $("#edit-emp-email").val(),
                        "birth": new Date($("input[name='edit-birth']").val()),
                        "salary": $("#edit-emp-salary").val(),
                        "status": $("#edit-emp-status").val()
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            getEmpList();
                            $("#bt-edit-emp-cancel").click();
                        }else{
                            $("#edit-emp-error-msg").empty();
                            $("#edit-emp-error-msg").append(result.msg);
                        }
                    },
                    error: function(){
                        $("#edit-emp-error-msg").empty();
                        $("#edit-emp-error-msg").append("Oppp, something goes wrong(Please select a valid birth)!");
                    }
                });
            };
            
            function clearAddEmpForm(){
                $("#add-emp-username").val("");
                $("#add-emp-password").val("");
                $("#add-emp-name").val("");
                $("input[name='add-gender']:checked").val("");
                $("#add-emp-dept").selectPageClear();
                $("#add-emp-title").selectPageClear();
                $("#add-emp-mobile").val("");
                $("#add-emp-email").val("");
                $("input[name='add-birth']").val("");
                $("#add-emp-salary").val("");
                $("#add-emp-error-msg").empty();
            }
            
            function deleteEmp(){
                $.ajax({
                    url: "${pageContext.request.contextPath}/emps/delete_emp.do",
                    data: {
                        "id": $("#emp-delete-id").val()
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            getEmpList();
                            $("#bt-delete-emp-cancel").click();
                        }else{
                            alert(result.msg);
                        }
                    },
                    error: function(){
                        alert(result.msg);
                    }
                });
            }
            
            function batchDelete(){
                var delEmp = new Array();
                $("input[name='delEmp']:checked").each(function(){
                    delEmp.push($(this).val());
                });
                if(delEmp.length === 0){
                    alert("Sorry, you didn't select any employee!");
                    $("#bt-batch-delete-emp-cancel").click();
                    return;
                }
                $.ajax({
                    url: "${pageContext.request.contextPath}/emps/batch_delete_emp.do",
                    data: {
                        "ids": delEmp.toString()
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            getEmpList();
                            $("#bt-batch-delete-emp-cancel").click();
                        }else{
                            alert(result.msg);
                        }
                    },
                    error: function(){
                        alert("Delete failed!");
                    }
                });
            }
            
            function searchEmp() {
                $("#search-emp-name").val($("#sh-name").val());
                $("#search-emp-mobile").val($("#sh-mobile").val());
                $("#search-emp-dept").val($("#sh-dept").val());
                $("#search-emp-title").val($("#sh-title").val());
                $("#search-emp-page").val("1");
                getEmpList();
            }
            
            function selectAllEmp() {
                if($("#select-all-bt").attr("select")==="1"){
                    $("input[name='delEmp']").each(function(){
                        $(this).prop("checked", true);
                    });
                    $("#select-all-bt").attr("select", "0");
                }else{
                    $("input[name='delEmp']").each(function(){
                        $(this).prop("checked", false);
                    });
                    $("#select-all-bt").attr("select", "1");
                }
            }
	</script>
    </body>
</html>
